<template>
  <div>
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ myAge + 1 }}</h2>
    <h2>性别：{{ gender }}</h2>
    <div><button @click="updateAge">更新年龄</button></div>
  </div>
</template>

<script>
export default {
  // props:['name','age', 'gender'], // 简单接收

  /*
  // 指定数据类型
  props: {
    name: String,
    age: Number,
    gender: String,
  },
  */

  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      required: false,
      default: 99,
    },
    gender: {
      type: String,
      required: true,
    },
  },

  data() {
    return {
      myAge: this.age, // props 的优先级更高，这里使用 props 接收到的值进行初始化
    };
  },
  methods: {
    updateAge() {
      this.myAge++;
    },
  },
};
</script>
